<template>
    <div id="editProduct">
        <!--后退-->
        <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <div id="shop">
            <div class="shopTitle">
                <img class="shopImg" src="../../../assets/task/shop.png" alt="">
                <div class="shopName">
                    <section style="font-size:0.8rem;color:#8b8b8b;">专业跑腿</section>
                    <p class="next">详情 ></p>
                </div>
            </div>
            <!--达人卡片封面详情修改-->
            <div class="shopCon">
                <div class="cover">
                    <div class="particulars" v-on:click.once="alterTypeSetOne">
                        <div v-show="coverOne">
                            <p v-if="shopCover.topExplainJson.input1==undefined">
                                <img :src="shopCover.topExplainJson.common1" class="avatar1">
                            </p> 
                            <p v-else="shopCover.topExplainJson.common1==undefined">
                                {{shopCover.topExplainJson.input1}}
                            </p>
                        </div>
                        <section v-show="coverDoubleOne">
                            <p v-if="txtOne=='2'">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://haixia.yaowk.xin/file"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessOne">
                                    <img v-if="shopCover.topExplainJson.common1" :src="shopCover.topExplainJson.common1" class="avatar1">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </p>
                            <p v-else-if="txtOne=='1'">
                                <textarea  maxlength="390" v-model="shopCover.topExplainJson.input1"></textarea>
                            </p>
                        </section>
                    </div>
                    <div style="margin:auto;width:30%">
                        <div class="upper"  v-on:click.once="alterTypeSetTwo">
                            <div v-show="coverTwo">
                                <p v-if="shopCover.topExplainJson.input2==undefined">
                                    <img :src="shopCover.topExplainJson.common2" class="avatar2">
                                </p> 
                                <p v-else="shopCover.topExplainJson.common2==undefined">
                                    {{shopCover.topExplainJson.input2}}
                                </p>
                            </div>
                            <section v-show="coverDoubleTwo">
                                <p v-if="txtTwo=='2'">
                                    <el-upload
                                        class="avatar-uploader"
                                        action="http://haixia.yaowk.xin/file"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccessTwo">
                                        <img v-if="shopCover.topExplainJson.common2" :src="shopCover.topExplainJson.common2" class="avatar2">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </p>
                                <p v-else-if="txtTwo=='1'">
                                    <textarea  maxlength="390" v-model="shopCover.topExplainJson.input2"></textarea>
                                </p>
                            </section>
                        </div>
                        <div class="lower" v-on:click.once="alterTypeSetThree">
                            <div v-show="coverThree">
                                <p v-if="shopCover.topExplainJson.input3==undefined">
                                    <img :src="shopCover.topExplainJson.common3" class="avatar2">
                                </p> 
                                <p v-else="shopCover.topExplainJson.common3==undefined">
                                    {{shopCover.topExplainJson.input3}}
                                </p>
                            </div>
                            <section v-show="coverDoubleThree">
                                <p v-if="txtThree=='2'">
                                    <el-upload
                                        class="avatar-uploader"
                                        action="http://haixia.yaowk.xin/file"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccessThree">
                                        <img v-if="shopCover.topExplainJson.common3" :src="shopCover.topExplainJson.common3" class="avatar2">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </p>
                                <p v-else-if="txtThree=='1'">
                                    <textarea  maxlength="390" v-model="shopCover.topExplainJson.input3"></textarea>
                                </p>
                            </section>
                        </div>
                    </div>
                </div>
                
                <div class="editSecifications">
                    <section>
                        <p>规格</p>
                        <section class="type">
                            <p v-for="(item,index) in shopCover.specModels">
                                <input v-model="item.specName" type="text" placeholder="请输入" maxlength="4">
                                <img @click="delType" src="../../../assets/me/chanel.png" alt="">
                            </p>
                            <button @click="addType"><img src="../../../assets/me/add.png" alt=""></button>
                        </section>
                        <p style="margin-top:1rem;">价格</p>
                        <section class="price">
                            <p v-for="item in shopCover.specModels">
                                    <span>{{item.specName}}:</span>
                                    <input type="number" v-model="item.specPrice" maxlength="8">
                            </p>
                        </section>
                        <p style="margin-top:1rem;">修改服务标题</p>
                        <p class="serTitle"><input type="text" maxlength="10" v-model="shopCover.serverName"></p>
                        <p style="margin-top:1rem;">选择服务类型</p>
                        <section>
                            <el-radio v-model="shopCover.serverType" label="1">服务</el-radio>
                            <el-radio v-model="shopCover.serverType" label="2">商品</el-radio>
                        </section>
                    </section>
                </div>
            </div>
        </div>   
        <div class="footer">
            <p @click="nextStoreDet">下一步编辑详情</p>
            <p>查看全部评价</p>
        </div>
        <!--第一次弹出框-->
        <div id="genreWindowOne" v-show="genreWindowOne">  
        </div> 
        <div id="genreLayerOne" v-show="genreLayerOne">  
            <p><img  @click="closeDivOne" src="../../../assets/task/chanelB.png" alt=""></p>
            <p><img src="../../../assets/task/rubbit.png" alt=""></p>
            <p>请选择排版类型噢</p>
            <section>
                <p @click="typeSetOne('1')">文字</p>
                <p @click="typeSetOne('2')">图片</p>
            </section>
        </div>  
        <!--第一次弹出框-->
        <div id="genreWindowTwo" v-show="genreWindowTwo">  
        </div> 
        <div id="genreLayerTwo" v-show="genreLayerTwo">  
            <p><img  @click="closeDivTwo" src="../../../assets/task/chanelB.png" alt=""></p>
            <p><img src="../../../assets/task/rubbit.png" alt=""></p>
            <p>请选择排版类型噢</p>
            <section>
                <p @click="typeSetTwo('1')">文字</p>
                <p @click="typeSetTwo('2')">图片</p>
            </section>
        </div> 
        <!--第一次弹出框-->
        <div id="genreWindowThree" v-show="genreWindowThree">  
        </div> 
        <div id="genreLayerThree" v-show="genreLayerThree">  
            <p><img  @click="closeDivThree" src="../../../assets/task/chanelB.png" alt=""></p>
            <p><img src="../../../assets/task/rubbit.png" alt=""></p>
            <p>请选择排版类型噢</p>
            <section>
                <p @click="typeSetThree('1')">文字</p>
                <p @click="typeSetThree('2')">图片</p>
            </section>
        </div> 
    </div>
</template>
<script>
export default {
  data () {
    return {
        coverOne:true,
        coverDoubleOne:false,
        coverTwo:true,
        coverDoubleTwo:false,
        coverThree:true,
        coverDoubleThree:false,
        txtOne:undefined,
        txtTwo:undefined,
        txtThree:undefined,
        genreWindowOne:false,
        genreLayerOne:false,
        genreWindowTwo:false,
        genreLayerTwo:false,
        genreWindowThree:false,
        genreLayerThree:false,
        shopCover:{
            explainJson:{
                textSetOne:[],
                textSetTwo:[],
                textSetThree:[],
                imageOne:[],
                imageTwo:[],
                imageThree:[]
            },
            inventory: undefined,
            id: this.$route.params.id,
            new: true,
            serverExplain: undefined,
            serverName: undefined,
            serverStatus: undefined,
            serverType: undefined,
            shopId:undefined ,
            specModels: [
                {
                    id: '',
                    new: true,
                    serverId: '',
                    specName: undefined,
                    specPrice: '',
                    type:undefined,
                    welfareId: ''
                }
            ],
            topExplainJson: {
                common1:undefined,
                common2:undefined,
                common3:undefined,
                input1:undefined,
                input2:undefined,
                input3:undefined,
            }
        },
        }
    },
    created(){
        this.storeId=this.$route.params.id;
        this.getShopCover();
    },
    mounted(){
        console.log(this.storeId)
   
    },
    methods:{
        //编辑
        getShopCover(){
            console.log(this.storeId)
            this.$api.serverOnes(this.storeId).then((res)=>{
                if(res.code == '000000'){
                    this.shopCover=res.data;
                    this.shopCover.topExplainJson=JSON.parse(this.shopCover.topExplainJson)
                    this.shopCover.explainJson=JSON.parse(this.shopCover.explainJson)
                    console.log('this.shopCover')
                    console.log(this.shopCover)
                }
            })
        },
        nextStoreDet(){
            this.shopCover.id= this.storeId

            this.$router.push({
                path: '/storeDetails',
                name: 'storeDetails', 
                query: {
                    name: 'storeDetails',
                    data:this.shopCover,
                }
            })
        
        },
        //添加规格
        addType(){
            //限制添加规格数
            if(this.shopCover.specModels.length == 3){
                return
            }
            var obj={}
            obj.specName=undefined
            obj.specPrice=undefined
            console.log('this.shopCover.specModels')
            console.log(this.shopCover.specModels)
            this.shopCover.specModels.push(obj)
        },
        //删除
        delType(index){
            this.shopCover.specModels.splice(index,1)
        },
        alterTypeSetOne(){
            this.coverOne=false,
            this.coverDoubleOne=true,
            this.genreWindowOne=true;
            this.genreLayerOne=true;
        },
        alterTypeSetTwo(){
            this.coverTwo=false,
            this.coverDoubleTwo=true,
            this.genreWindowTwo=true;
            this.genreLayerTwo=true;
        },
        alterTypeSetThree(){
            this.coverThree=false,
            this.coverDoubleThree=true,
            this.genreWindowThree=true;
            this.genreLayerThree=true;
        },        
        closeDivOne(){
            this.genreWindowOne=false;
            this.genreLayerOne=false;
        },
        closeDivTwo(){
            this.genreWindowTwo=false;
            this.genreLayerTwo=false;
        },
        closeDivThree(){
            this.genreWindowThree=false;
            this.genreLayerThree=false;
        },
        typeSetOne(val){
            this.txtOne=val;
            this.genreWindowOne=false;
            this.genreLayerOne=false;
        },
        typeSetTwo(val){
            this.txtTwo=val;
            this.genreWindowTwo=false;
            this.genreLayerTwo=false;
        },
        typeSetThree(val){
            this.txtThree=val;console.log()
            this.genreWindowThree=false;
            this.genreLayerThree=false;
        },
        handleAvatarSuccessOne(res, file) {
            this.shopCover.topExplainJson.common1 = res.data.file;
        },
        handleAvatarSuccessTwo(res, file) {
            this.shopCover.topExplainJson.common2 = res.data.file;
        },
        handleAvatarSuccessThree(res, file) {
            this.shopCover.topExplainJson.common3 = res.data.file;
        },

  }
}
</script>
<style>
#editProduct{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/bgA.png);
}
#editProduct .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 1rem 0rem 1rem;
}
#editProduct #shop{
    margin:0.75rem;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
}
#editProduct #shop .shopTitle{ 
    display:flex;
    padding:0.75rem;
}

#editProduct #shop .shopImg{
    width:1.5rem;
    height:1.5rem;
    margin:auto 0.25rem;
}
#editProduct #shop .shopName{
    width:100%;
    display:flex;
    justify-content:space-between;
}

#editProduct #shop .star>img{
    width:0.6rem;
    height:0.6rem;
}
#editProduct #shop .next{
    width:3rem;
    margin-right:0.75rem;
    text-align:center;
    line-height:1.5rem;
    height:1.5rem;
    background:#c4e1c6;
    border-radius:7px;
    font-size:0.7rem;
    color:#ffffff;
}

#editProduct #shop .shopCon{
    height:78vh;
    font-size:0.9rem;
    overflow-y:auto;
}
#editProduct #shop .shopCon .cover{
    display:flex;
    width:93%;
    margin:auto;
}
#editProduct #shop .shopCon .particulars{
    height:13rem;
    width:70%;
    border-radius:7px;
    border:7px solid #29a193;
    overflow:hidden;
}
#editProduct #shop .shopCon .particulars > section{
    width:100%;
    height:100%;
}
#editProduct #shop .shopCon .particulars > section > p{
    width:100%;
    height:100%;
}
#editProduct #shop .shopCon .particulars > section > p textarea{
    width:100%;
    height:100%;
    padding:5%;
    word-break:break-all;
}
#editProduct #shop .shopCon .upper{
    height:6.5rem;
    border-radius:7px;
    border:7px solid #c4e1c6;
}
#editProduct #shop .shopCon .upper > div > p{
    height:100%;
    width:100%;
    word-break:break-all;
}
#editProduct #shop .shopCon .lower > div > p{
    height:100%;
    width:100%;
    word-break:break-all;
}
#editProduct #shop .shopCon .upper > section{
    width:100%;
    height:100%;
}
#editProduct #shop .shopCon .upper > section > p{
    width:100%;
    height:100%;
}
#editProduct #shop .shopCon .upper > section > p textarea{
    width:100%;
    height:100%;
    padding:5%;
}
#editProduct #shop .shopCon .lower{
    height:6.5rem;
    border-radius:7px;
    border:7px solid #69b373;
}
#editProduct #shop .shopCon .lower > section{
    width:100%;
    height:100%;
}
#editProduct #shop .shopCon .lower > section > p{
    width:100%;
    height:100%;
}
#editProduct #shop .shopCon .lower > section > p textarea{
    width:100%;
    height:100%;
    padding:5%;
}
#editProduct .avatar-uploader{
    width:100%;
    height:100%;
}
#editProduct  .avatar-uploader .el-upload{
     width:100%;
    height:100%;
}
#editProduct .avatar-uploader-icon{
    width:100%!important;
    height:100%!important;
    line-height:4.4rem!important;
}
#editProduct  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
#editProduct .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
#editProduct .avatar-uploader-icon {
    font-size: 1.4rem;
    color: #8c939d;
    width: 100%;
    height: 100%;
    line-height:100%;
    text-align: center;
}
#editProduct .avatar1{
    width: 100%;
    height: 12.1rem;
    display: block;
}
#editProduct .avatar2{
    height:5.5rem;
    width:5.5rem;
}

#editProduct .editSecifications{
    margin:1.5rem 0.05rem 1.5rem 0.05rem;
    padding:0.75rem;
    line-height:2rem;
    border-radius:13px;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #e2e2e2;
}
#editProduct .editSecifications .type{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#editProduct .editSecifications .type > p{
    display:inline-block;
    height:2.5rem;
    width:4.5rem;
    background:#f8f8f8; margin:0.25rem 0;
    border-radius:8px;
}
#editProduct .editSecifications .type > p > input{
    display:inline-block;
    height:1.75rem;
    line-height:1.75rem;
    width:3.5rem;
    padding:0.25rem;
    text-align:center;
}
#editProduct .editSecifications .type > p > img{
    height:0.8rem;
    width:0.8rem;
    position:relative;
    top:-2.5rem;
    left:3rem;
}
#editProduct .editSecifications .type > button{
    height:2.5rem;
    width:4.5rem;
    margin:0.25rem 0;
    background:#69b373;
    border-radius:8px;
}
#editProduct .editSecifications .type > button > img{
    height:0.8rem;
    width:0.8rem;
}
#editProduct .editSecifications .price{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#editProduct .editSecifications .price > p{
    display:flex;
    width:40%;
    background:#f8f8f8;
    border-radius:8px;
    padding:0px 0.75rem;
    margin:0.25rem 0;color:#c0c0c0;
}
#editProduct .editSecifications .price > p > input{
    padding:0 0.8rem;
    width:100%
}

#editProduct .editSecifications .price > button{
    margin-top:0.75rem;
    height:1.75rem;
    width:40%;
    border-radius:8px;
    border:2px solid #69b373;
}
#editProduct .editSecifications .price > button > img{
    height:0.8rem;
    width:0.8rem;
}
#editProduct .editSecifications .serTitle > input{
    height:2.25rem;
    width:100%;
    border-radius:8px;
    background:#f8f8f8;
    padding:0.25rem 0.75rem;
}
#editProduct .footer{
    display:flex;
    color:#fff;
    width:100%;
    position:absolute;
    bottom:0;
}
#editProduct .footer p{
    width:50%;
    text-align:center;
    height:3rem;
    line-height:3rem;
    font-size:1rem;
}
#editProduct .footer  p:nth-child(1){
    background:#29a193;
}
#editProduct .footer  p:nth-child(2){
    background:#69b373;
}
#editProduct #genreWindowOne,#genreWindowTwo,#genreWindowThree{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  
#editProduct #genreLayerOne,#genreLayerTwo,#genreLayerThree{   
    width: 80%;
    height: 30%;
    background:#ffffff;  
    left: 10%;  
    top: 20%;
    color:#000;  
    z-index: 2; 
    padding:0.5rem;
    border-radius:0.8rem; 
    position: absolute;  
}
#editProduct #genreLayerOne > p:nth-child(1){
    text-align:right;
}
#editProduct #genreLayerOne > p:nth-child(2){
    text-align:center
}
#editProduct #genreLayerOne > p:nth-child(2) > img{
    height:5rem;
}
#editProduct #genreLayerOne > p:nth-child(3){
    text-align:center;
    font-size:0.8rem;
    color:#c0c0c0;
}
#editProduct #genreLayerOne > section{
    margin-top:1rem;
    display:flex;
    width:80%;
    margin:1rem auto;
    justify-content: space-between;
}
#editProduct #genreLayerOne > section > p{
    width:40%;
    background:#29a193;
    text-align:center;
    height:2.5rem;
    line-height:2.5rem;
    border-radius:0.8rem;
    color:#fff;
}
#editProduct #genreLayerTwo > p:nth-child(1){
    text-align:right;
}
#editProduct #genreLayerTwo > p:nth-child(2){
    text-align:center
}
#editProduct #genreLayerTwo > p:nth-child(2) > img{
    height:5rem;
}
#editProduct #genreLayerTwo > p:nth-child(3){
    text-align:center;
    font-size:0.8rem;
    color:#c0c0c0;
}
#editProduct #genreLayerTwo > section{
    margin-top:1rem;
    display:flex;
    width:80%;
    margin:1rem auto;
    justify-content: space-between;
}
#editProduct #genreLayerTwo > section > p{
    width:40%;
    background:#29a193;
    text-align:center;
    height:2.5rem;
    line-height:2.5rem;
    border-radius:0.8rem;
    color:#fff;
}
#editProduct #genreLayerThree > p:nth-child(1){
    text-align:right;
}
#editProduct #genreLayerThree > p:nth-child(2){
    text-align:center
}
#editProduct #genreLayerThree > p:nth-child(2) > img{
    height:5rem;
}
#editProduct #genreLayerThree > p:nth-child(3){
    text-align:center;
    font-size:0.8rem;
    color:#c0c0c0;
}
#editProduct #genreLayerThree > section{
    margin-top:1rem;
    display:flex;
    width:80%;
    margin:1rem auto;
    justify-content: space-between;
}
#editProduct #genreLayerThree > section > p{
    width:40%;
    background:#29a193;
    text-align:center;
    height:2.5rem;
    line-height:2.5rem;
    border-radius:0.8rem;
    color:#fff;
}
</style>